<!doctype html>
<meta charset=utf-8>
<title>Reversal of transitions previously modified by GetKeyframes</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id="log"></div>
<script>
'use strict';

function addDiv(t) {
  var div = document.createElement('div');

  document.body.appendChild(div);
  t.add_cleanup(function() {
    if (div.parentNode) {
      div.remove();
    }
  });
  return div;
};

// These are simillar to wpt/css/css-transitions/KeyframeEffect-getKeyframes
// but these use a getComputedStyle to force style evaluation of the modified
// animation, simulating the effect of modifying and reversing the transition
// on separate frames. This is intended as a regression test for our partial
// implementation of this behavior.

function retarget_test(description, newKeyframes, reversed_start) {
  test(t => {
    const div = addDiv(t);

    div.style.left = '0px';
    getComputedStyle(div).transitionProperty;
    div.style.transition = 'left 100s linear';
    div.style.left = '100px';

    const transition = div.getAnimations()[0];
    transition.currentTime = 50000;
    transition.effect.setKeyframes(newKeyframes);

    // Sync on style so the setKeyframes and the reversal happen on different frames.
    getComputedStyle(div).left;

    // Reverse transition
    div.style.left = '0px';
    const reversedTransition = div.getAnimations()[0];

    assert_approx_equals(
      reversedTransition.effect.getComputedTiming().activeDuration,
      50000, 1,
      "The reversed transition has correctly reduced duration"
    );
    assert_equals(reversedTransition.effect.getKeyframes()[0].left, reversed_start,
        "The reversed transition starts at the expected point");
  },  description);
}

retarget_test("A transition with replaced keyframes (same property) still exhibits " +
    "normal reversing behavior.",
    {left: ['200px', '300px', '100px']}, '300px');

retarget_test("A transition with replaced keyframes (different property) still exhibits " +
    "normal reversing behavior  (reversing from the base value).",
    {top: ['200px', '300px', '100px']}, '100px');

retarget_test("A transition with replaced keyframes (empty) still exhibits " +
    "normal reversing behavior (reversing from the base value).",
    {}, '100px');

</script>
